<template>
  <div class="qlog_main_wrap">
    <!-- <p> Hello 当前屏幕宽 {{ screenWidth }} </p> -->
    <!-- <h4> {{ curCode }} </h4> -->
    <!-- <h4> {{ oneHead }} </h4>
    <img class="boneimg" alt="Vue logo" src="../assets/loginBone.png"> -->
    
    <div class="loader">
        <div class="face">
          <div class="circle"></div>
        </div>
        <div class="face">
          <div class="circle"></div>
        </div>
        <div class="fontSty" id="fontSty0" >{{ oneHead }}</div>
    </div>
    <div class="info_area">
      <p>©
      <a href="_" title="www.southmax.com.cn"  > </a>  www.southmax.com.cn &nbsp;
      <a href="http://www.miitbeian.gov.cn/" target="_blank" > 粤ICP备18092312号 </a>
      <br>违法和不良信息举报电话：133-0288-9085，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
    </p>
    </div>    
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    // HelloWorld,
  },
})
export default class Home extends Vue {
  screenWidth:number = document.body.offsetWidth
  curCode:string = '11'
  oneHead:string = 'Loading'

  created() {
    // this.loginCall () 
    this.getCode()
  }
  mounted () {
        // console.log('Mountedlogin...', this.$route.query.code)
        let that = this
        // console.log ('luyouBefore',this.curCode)
        // window.onresize = () => {
        //   that.screenWidth = document.body.offsetWidth || document.body.clientWidth 
        //   console.log ('After',this.screenWidth)
        // }
        this.$nextTick(function () {
            // this.curCode = this.$route.query.code
            // console.log( this.$route.query.state )     // => 'updated'
          })
    }
    // 获取code回到主服务器程序
  getCode(){
    let xCode = this.$route.query.code
    let remoteState = this.$route.query.state
    // let scanUserId = this.$route.query.scanUserId 
    // let scanSecret = this.$route.query.scanSecret 
    // window.location.href = "http://localhost:8080/wechatBind?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
    // wechatBind 旧版微信绑定页，单表单；chatLoad 是带TAB切换的微信绑定页，双表单，区分新老用户
    // 
    if ( remoteState == 'dev') {  // 旧dev分支(已废弃)
             window.location.href = "https://www.southmax.com.cn/wechatBind?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
        }else if ( remoteState == 'test') {       // 微信登录跳转回澳门TEST服务器的情况
             window.location.href = "https://apptest.southmax.com.cn/chatLoad?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
        }else if ( remoteState == 'tabSpace' ) {  // 微信登录跳转回本地251服务器的情况
             window.location.href = "https://www.southmax.com.cn/chatLoad?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
        }else if ( remoteState == 'localTest' ) {  // 本机测试(暂无效)
             window.location.href = "https://localhost/chatLoad?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
        }
        else if ( remoteState == 'live' ) {  // Live正式环境(澳门)
             window.location.href = "https://app.yinkui.com.mo/chatLoad?code=" + xCode + "&connect_redirect=1" + "&state=" + remoteState
        }
        else if ( remoteState.includes('scanDev') ) {    // 本地251服务器 快速二维码扫码渠道
             let scanId = remoteState.split('scanDev')[0] 
             let scanSrt = remoteState.split('scanDev')[1]
             window.location.href = "https://www.southmax.com.cn/chatLoad?code=" + xCode + "&connect_redirect=1&state=scanDev" 
                                    + "&scanUserId=" + scanId + "&scanSecret=" + scanSrt
        }else if ( remoteState.includes('scanTest') ) {   // 澳门test服务器 快速二维码扫码渠道
             let scanId = remoteState.split('scanTest')[0] 
             let scanSrt = remoteState.split('scanTest')[1]
             window.location.href = "https://apptest.southmax.com.cn/chatLoad?code=" + xCode + "&connect_redirect=1&state=scanTest" 
                                    + "&scanUserId=" + scanId + "&scanSecret=" + scanSrt
        }
        else if ( remoteState.includes('scanLive') ) {   // 澳门test服务器 快速二维码扫码渠道
             let scanId = remoteState.split('scanLive')[0] 
             let scanSrt = remoteState.split('scanLive')[1]
             window.location.href = "https://app.yinkui.com.mo/chatLoad?code=" + xCode + "&connect_redirect=1&state=scanLive" 
                                    + "&scanUserId=" + scanId + "&scanSecret=" + scanSrt
        }
        else{
            this.oneHead = '当前未有跳转信息,请返回重试'
        }
  }
  loginCall() {
    // console.log('createlogin...')
  }
  

}
</script>

<style lang="less">
    .qlog_main_wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        left: 0px;
        top: 0px;
        // opacity: 0.5 ;
    }
    .info_area {
      position: absolute;
      bottom: 1px;
    }
    .boneimg {
        margin: 1px auto ;
        display: block;
        width: 100%;
        height: 95%;
        opacity: 0.5 ;
    }

  .loader {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.loader {
    width: 200px;
    height: 200px;
    position: relative;
    top: 16%;
    left: 22.8%;
}

.loader .face {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: var(--color);
    border-left-color: var(--color);
    animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    --color: gold;
    --deg: 0deg;
}

.loader .face:nth-child(2) {
    width: 70%;
    height: 70%;
    --color: lime;
    --deg: 180deg;
    animation-direction: reverse;
}

.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 1px;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(calc(var(--deg) - 45deg));
    transform-origin: left;
}

.loader .face .circle::before {
    position: absolute;
    top: -5px;
    right: -5px;
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--color);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--color),
                0 0 40px var(--color),
                0 0 60px var(--color),
                0 0 80px var(--color),
                0 0 100px var(--color),
                0 0 0 5px rgba(255, 255, 0, 0.1);
}
.fontSty{
    position: absolute;
    color: #1a1818;
    z-index: 111;
    top: 41%;
    left: 34.5%;
    font-weight: bold;
}
@keyframes animate {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(360deg);
    }
}

    // .v_state {
    //    position: absolute;
    //     right: 5%;
    //     top: -10px;
    // }
</style>

